<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="refresh" content="60">
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript"
		src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDoxuHjGt2daQU_bkw5MazP1QI9VW6r95g&sensor=false">	
	</script>
	<script type="text/javascript" src='<c:url value="/resources/js/map.js" />' > </script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			MapUtil.init();
			MapUtil.loadMap();
		});
	</script>
	
	<style type="text/css">
	#heading{
		text-align: center;
	}
	#map{
		width: 800px;
		height: 500px;
		padding: 5px;
	}
	#sidebar{
		width: 400px;
		height: 500px;
		padding: 5px;
	}
	table{
		border: 1px solid;
	}
	</style>
</head>

<body>
	<h1 id="heading">View Map</h1>
	
	<div id="gps-info">
		<c:forEach var="gps" items="${listGps }">
			<input class="latlng" id="latlng${gps.gid }" type="hidden" value="${gps.latitude },${gps.longitude },${gps.dateUpdate }" />
		</c:forEach>
	</div>
	
	<table>
		<tr>
			<td><div id="map" ></div></td>
			<td><div id="sidebar"></div></td>
		</tr>
	</table>
	
    
</body>
</html>